<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:m="http://www.ol4jsf.org"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:o="http://openfaces.org/"
	template="/WEB-INF/esquema/plantillaworkflow.xhtml">

	<style>
		.contentEditData {
			width:100%;
			height:300px;
			overflow:auto;
		}
	</style>
	
	<ui:define name="activityCustomContent">
		<h:panelGroup id="zoomTo">
			<script type="text/javascript">
				function zoomToProperty() {
					bounds = new OpenLayers.Bounds();
					bounds.left = #{dataEntryHelper.envelopeLeft};
					bounds.bottom = #{dataEntryHelper.envelopeBottom};
					bounds.right = #{dataEntryHelper.envelopeRight};
					bounds.top = #{dataEntryHelper.envelopeTop};
					mapEditor.zoomToExtent(bounds, true);
				}
			</script>
		</h:panelGroup>
		<h3>#{messages['dataentry.properties_to_work']}</h3>
		<br/>
		Haga clic en predio
		<br/>
		<br/>
		<div class="contentEditData">
			Predios por ficha de campo/clave catastral!
			<br/>
			<br/>
			<h:panelGroup id="requestedParcelList">
				<ui:repeat var="parcelData" value="#{dataEntryHelper.requestedParcels}">
					<li>
						<a4j:commandLink reRender="zoomTo,panelRights,panelRestrictions,panelResponsibilities,editDataTab1,editDataTab2" oncomplete="zoomToProperty()">
							<f:setPropertyActionListener target="#{dataEntryHelper.rrrHelper.parcelRightsList}" value="#{null}" />
							<f:setPropertyActionListener target="#{dataEntryHelper.rrrHelper.parcelRestrictionsList}" value="#{null}" />
							<f:setPropertyActionListener target="#{dataEntryHelper.rrrHelper.parcelResponsibilitiesList}" value="#{null}" />
							<f:setPropertyActionListener target="#{dataEntryHelper.selectedSpatialUnitId}" value="#{parcelData.suID}" />
							<h:outputText value="#{parcelData.fieldTab}" />
							#{" / "}
							<h:outputText value="#{parcelData.cadastralKey == null ? '(sin clave catastral)' : parcelData.cadastralKey}" />
						</a4j:commandLink>
					</li>
				</ui:repeat>
			</h:panelGroup>
			<br/>
			<br/>
			Parcelas vecinas
			<br/>
			<br/>
			<ui:repeat var="parcelData" value="#{dataEntryHelper.neighborParcels}">
				<li>
					<a4j:commandLink reRender="zoomTo,panelRights,panelRestrictions,panelResponsibilities,editDataTab1,editDataTab2" oncomplete="zoomToProperty()">
						<f:setPropertyActionListener target="#{dataEntryHelper.rrrHelper.parcelRightsList}" value="#{null}" />
						<f:setPropertyActionListener target="#{dataEntryHelper.rrrHelper.parcelRestrictionsList}" value="#{null}" />
						<f:setPropertyActionListener target="#{dataEntryHelper.rrrHelper.parcelResponsibilitiesList}" value="#{null}" />
						<f:setPropertyActionListener target="#{dataEntryHelper.selectedSpatialUnitId}" value="#{parcelData.suID}" />
						<h:outputText value="#{parcelData.fieldTab}" />
						#{" / "}
						<h:outputText value="#{parcelData.cadastralKey == null ? '(sin clave catastral)' : parcelData.cadastralKey}" />
					</a4j:commandLink>
				</li>
			</ui:repeat>
		</div>
		<br/><br/>
		<rich:separator height="3px"/>
		<br/>
	</ui:define>
	
	<ui:define name="body">
		<style type="text/css">
			.olControlPanel {
				float: right;
				right: 0px;
				height: 30px;
			}
			.olControlPanel div {
				float: right;
				display:block;
				width:  24px;
				height: 24px;
				margin: 5px;
				background-color:red;
			}

			.olControlPanel .olControlNavigationItemActive {
				background-color: blue;
				background-image: url("http://www.openlayers.org/api/2.10/theme/default/img/pan_on.png");
			}
			.olControlPanel .olControlNavigationItemInactive {
				background-color: orange;
				background-image: url("http://www.openlayers.org/api/2.10/theme/default/img/pan_off.png");
			}
            .olControlPanel .olControlDrawFeatureItemActive {
                width:  22px;
                height: 22px;
                background-image: url("http://www.openlayers.org/api/2.10/theme/default/img/draw_line_on.png");
            }
			.olControlPanel .olControlDrawFeatureItemInactive {
				width:  22px;
				height: 22px;
				background-image: url("http://www.openlayers.org/api/2.10/theme/default/img/draw_line_off.png");
			}
			.olControlPanel .olControlZoomBoxItemInactive {
				width:  22px;
				height: 22px;
				background-color: orange;
				background-image: url("http://www.openlayers.org/api/2.10/img/drag-rectangle-off.png");
			}
            .olControlPanel .olControlZoomBoxItemActive {
				width:  22px;
				height: 22px;
				background-color: blue;
				background-image: url("http://www.openlayers.org/api/2.10/img/drag-rectangle-on.png");
            }
            .olControlPanel .olControlZoomToMaxExtentItemInactive {
				width:  18px;
				height: 18px;
				background-image: url("http://www.openlayers.org/api/2.10/img/zoom-world-mini.png");
            }
			.alignTop {
				vertical-align:top;
			}
			.rich-filter-input {
				width: 50px;
			}
			.rich-spinner-input {
				width: 30px;
			}
        </style>

        <a4j:loadScript src="http://localhost:8080/openlayers/OpenLayers.js"/>
        <!-- a4j:loadScript src="ol4jsfLibrary.jsf?name=openlayers/OpenLayers.js"/-->
        <!-- script type="text/javascript" src="ol4jsfLibrary.jsf?name=openlayers/OpenLayers.js"></script-->
		<s:remote include="testDao"/>
		<s:remote include="bpmNav"/>
		<s:remote include="dataEntryHelper"/>
		<s:remote include="analysisHelper"/>
		<script type="text/javascript">
			Seam.Remoting.getContext().setConversationId(#{conversation.id});
		</script>

		<div align="center">
			<strong>INGRESO DE DATOS (EN DESARROLLO!)</strong>
			<rich:separator lineType="solid"/>
			<br/>
		</div>
		<h:form id="misc">
			<center>
				<rich:panel style="width:100%">
					<rich:toolBar height="25" itemSeparator="line">
						<rich:toolBarGroup>
							<h:panelGroup>
							<o:commandButton type="button" onclick="#{rich:component('rightsPanelToolbox')}.show()">
								<h:graphicImage value="/img/rights-icon.png" width="24px" height="24px"/>
								<br />
								<h:outputLabel value="#{messages['dataentry.rights_toolbox']}" style="font-weight:bold;"/>
								<rich:toolTip followMouse="true" direction="top-right" showDelay="500" styleClass="tooltip">
									<span style="white-space:nowrap">
										#{messages['dataentry.rights_toolbox_desc']}
									</span>
								</rich:toolTip>
							</o:commandButton>
							<o:commandButton type="button" onclick="#{rich:component('restrictionsPanelToolbox')}.show()">
								<h:graphicImage value="/img/restrictions-icon.png" width="24px" height="24px"/>
								<br />
								<h:outputLabel value="#{messages['dataentry.restrictions_toolbox']}" style="font-weight:bold;"/>
								<rich:toolTip followMouse="true" direction="top-right" showDelay="500" styleClass="tooltip">
									<span style="white-space:nowrap">
										#{messages['dataentry.restrictions_toolbox_desc']}
									</span>
								</rich:toolTip>
							</o:commandButton>
							<o:commandButton type="button" onclick="#{rich:component('responsibilitiesPanelToolbox')}.show()">
								<h:graphicImage value="/img/responsibilities-icon.png" width="24px" height="24px"/>
								<br />
								<h:outputLabel value="#{messages['dataentry.responsibilities_toolbox']}" style="font-weight:bold;"/>
								<rich:toolTip followMouse="true" direction="top-right" showDelay="500" styleClass="tooltip">
									<span style="white-space:nowrap">
										#{messages['dataentry.responsibilities_toolbox_desc']}
									</span>
								</rich:toolTip>
							</o:commandButton>
							</h:panelGroup>
						</rich:toolBarGroup>
						
						<rich:toolBarGroup>
							<h:panelGroup>
							<o:commandButton type="button" onclick="#{rich:component('splitPanelToolbox')}.show()">
								<h:graphicImage id="divisionImg" value="/img/split-icon.png" width="24px" height="24px"/>
								<br />
								<h:outputLabel value="#{messages['dataentry.split_toolbox']}" for="divisionImg" style="font-weight:bold;" />
								<rich:toolTip followMouse="true" direction="top-right" showDelay="500" styleClass="tooltip">
									<span style="white-space:nowrap">
										#{messages['dataentry.split_toolbox_desc']}
									</span>
								</rich:toolTip>
							</o:commandButton>
							<o:commandButton type="button" onclick="#{rich:component('mergePanelToolbox')}.show()">
								<h:graphicImage id="fusionImg" value="/img/merge-icon.png" width="24px" height="24px"/>
								<br />
								<h:outputLabel value="#{messages['dataentry.merge_toolbox']}" for="fusionImg" style="font-weight:bold;" />
								<rich:toolTip followMouse="true" direction="top-right" showDelay="500" styleClass="tooltip">
									<span style="white-space:nowrap">
										#{messages['dataentry.merge_toolbox_desc']}
									</span>
								</rich:toolTip>
							</o:commandButton>
							</h:panelGroup>
						</rich:toolBarGroup>
						
						<rich:toolBarGroup>
							<o:commandButton type="button" onclick="#{rich:component('editDataPanelToolbox')}.show()">
								<h:graphicImage id="dataImg" value="/img/edit.gif" width="24px" height="24px"/>
								<br />
								<h:outputLabel value="#{messages['dataentry.editdata_toolbox']}" for="dataImg" style="font-weight:bold;" />
								<rich:toolTip followMouse="true" direction="top-right" showDelay="500">
									<span style="white-space:nowrap">
										#{messages['dataentry.editdata_toolbox_desc']}
									</span>
								</rich:toolTip>
							</o:commandButton>
						</rich:toolBarGroup>
						
						<rich:toolBarGroup>
							<o:commandButton type="button" onclick="#{rich:component('undoPanelToolbox')}.show()">
								<h:graphicImage id="undoImg" value="/img/undo-icon.png" width="24px" height="24px"/>
								<br />
								<h:outputLabel value="#{messages['dataentry.undo_toolbox']}" for="undoImg" style="font-weight:bold;" />
								<rich:toolTip followMouse="true" direction="top-right" showDelay="500">
									<span style="white-space:nowrap">
										#{messages['dataentry.undo_toolbox_desc']}
									</span>
								</rich:toolTip>
							</o:commandButton>
						</rich:toolBarGroup>
						
						<rich:toolBarGroup location="right">
							<o:commandButton type="button" onclick="drawParcels();">
								<h:graphicImage id="refreshImg" value="/img/refresh-icon.png" width="24px" height="24px"/>
								<br />
								<h:outputLabel value="#{messages['dataentry.refresh_toolbox']}" for="refreshImg" style="font-weight:bold;" />
								<rich:toolTip followMouse="true" direction="top-right" showDelay="500">
									<span style="white-space:nowrap">
										#{messages['dataentry.refresh_toolbox_desc']}
									</span>
								</rich:toolTip>
							</o:commandButton>
						</rich:toolBarGroup>
						
						<rich:toolBarGroup location="right" width="24px" height="24px">
							<o:commandButton type="button">
								<h:graphicImage value="/img/help.png" width="25px" height="25px"/>
								<br />
								<h:outputLabel value="Ayuda" for="refreshImg" style="font-weight:bold;" />
								<rich:toolTip direction="top-left" showEvent="onclick" zorder="10000">
									<table width="500" border="1" cellpadding="0" cellspacing="0">
										<tr>
											<td>
											<table width="100%" border="0" align="center" cellpadding="0"
												cellspacing="0" bgcolor="#FFFFFF">
												<tr>
													<td width="50" valign="top">
														<h:graphicImage value="/img/int_ayuda.gif" width="60" height="60" />
													</td>
													<td width="500" class="tab">
														<h:outputText>
															Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
															<br/>
															Nam cursus. Morbi ut mi.
															<br/>
															Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa.
															<br/>
															Sed eleifend nonummy diam. Praesent mauris ante, elementum et,
															<br/>
															bibendum at, posuere sit amet, nibh.
															<br/>
															Duis tincidunt lectus quis dui viverra vestibulum.
															<br/>
															Suspendisse vulputate aliquam dui.
														</h:outputText>
														<br/>
														<br/>
														<ul style="line-height:normal;">
															<li>EN DESARROLLO</li>
															<li>EN DESARROLLO</li>
														</ul>
													</td>
												</tr>
											</table>
											</td>
										</tr>
									</table>
								</rich:toolTip>
							</o:commandButton>
						</rich:toolBarGroup>
					</rich:toolBar>
					
					<script type="text/javascript">
						var parcel_style = new OpenLayers.Style({'fillColor': '#669933', 'fillOpacity': .8, 'strokeColor': '#aaee77', 'strokeWidth': 3, 'pointRadius': 8, 'label': '${name}'});
						var parcel_style_map = new OpenLayers.StyleMap({'default': parcel_style});
						//alert(parcelFeaturesLayer);
						//alert('el estilo es: ' + parcel_style_map);
						//parcelFeaturesLayer.styleMap = parcel_style_map;
					
						OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
							defaultHandlerOptions: {
								'single': true,
								'double': false,
								'pixelTolerance': 0,
								'stopSingle': false,
								'stopDouble': false
							},

							initialize: function(options) {
								this.handlerOptions = OpenLayers.Util.extend(
									{}, this.defaultHandlerOptions
								);
								OpenLayers.Control.prototype.initialize.apply(
									this, arguments
								);
								this.handler = new OpenLayers.Handler.Click(
									this, {
									'click': this.trigger
									}, this.handlerOptions
								);
							},

							trigger: function(e) {
								var lonlat = mapEditor.getLonLatFromViewPortPx(e.xy);
								#{rich:element('utmNorthingInput')}.value = lonlat.lat;
								#{rich:element('utmEastingInput')}.value = lonlat.lon;
							}
						});

						function drawPropertiesAux(propertiesGML) {
							var prop = new OpenLayers.Format.GML().read(propertiesGML);
							parcelFeaturesLayer.addFeatures(prop);
						}
						function drawRequestedProperties() {
							var dataEntryHelper = Seam.Component.getInstance('dataEntryHelper');
							dataEntryHelper.getRequestedPropertiesGML(drawPropertiesAux);
						}
						function drawNeighborProperties() {
							var dataEntryHelper = Seam.Component.getInstance('dataEntryHelper');
							dataEntryHelper.getNeighborPropertiesGML(drawPropertiesAux);
						}
						function drawProperties() {
							drawRequestedProperties();
							drawNeighborProperties();
						}


						function drawParcelsAux(parcelsGML) {
							var prop = new OpenLayers.Format.GML().read(parcelsGML);
							parcelFeaturesLayer.addFeatures(prop);
						}
						function drawRequestedParcels() {
							var dataEntryHelper = Seam.Component.getInstance('dataEntryHelper');
							dataEntryHelper.getRequestedParcelsGML(drawParcelsAux);
						}
						function drawNeighborParcels() {
							var dataEntryHelper = Seam.Component.getInstance('dataEntryHelper');
							dataEntryHelper.getNeighborParcelsGML(drawParcelsAux);
						}
						function drawParcels() {
							vlayer.destroyFeatures();
							parcelFeaturesLayer.destroyFeatures();
							drawRequestedParcels();
							drawNeighborParcels();
						}
					</script>
					
					<m:map id="mapEditor" width="100%" height="450px" options="#{parcelEdition.parcelEditorOptions}" jsVariable="mapEditor">
						<m:wmsLayer name="Centroides de predio" params="{layers: 'omoa:centroides_predio', transparent: true, format: 'image/png'}" url="http://localhost:8080/geoserver/wms" options="{ projection: 'EPSG:32616' }"/>
						<m:wmsLayer name="Predios Omoa" url="http://localhost:8080/geoserver/wms" params="{layers: 'omoa:predios'}" options="{ projection: 'EPSG:32616', isBaseLayer: true }"/>
						<m:wmsLayer name="Bloques" params="{layers: 'omoa:bloques', transparent: true, format: 'image/png'}" url="http://localhost:8080/geoserver/wms" options="{ projection: 'EPSG:32616', isBaseLayer: false }"/>
						<m:wmsLayer name="Edificaciones" params="{layers: 'omoa:edificaciones', transparent: true, format: 'image/png'}" url="http://localhost:8080/geoserver/wms" options="{ projection: 'EPSG:32616', isBaseLayer: false }"/>
						<m:vectorLayer name="Editable" jsVariable="vlayer"/>
						<m:vectorLayer name="parcelFeaturesLayer" jsVariable="parcelFeaturesLayer" />
						<m:navigationControl />
						<m:panZoomBarControl />
						<m:layerSwitcherControl options="{ascending:false}"/>
						<m:scaleLineControl />
						<m:mousePositionControl />
						<m:overviewMapControl />
						<m:keyboardDefaultsControl />
						<m:panelControl>
							<m:navigationControl options="{title:'You can use the default mouse configuration'}"/>
							<m:zoomBoxControl options="{title:'Zoom box: Selecting it you can zoom on an area by clicking and dragging.'}" jsVariable="zb"/>
							<m:drawFeatureControl layer="vlayer" handler="OpenLayers.Handler.Path" options="{title:'Draw a feature'}" />
							<m:zoomToMaxExtentControl options="{title:'Zoom to the max extent'}" />
						</m:panelControl>
						<m:script>#{dataEntryHelper.mapScript}</m:script>
					</m:map>
					
            	</rich:panel>
			</center>
			
			<br/>
			<br/>

			<div align="center">			
				<a4j:commandButton id="siguiente" value="#{messages['button.ok']}" action="#{transactionProcess.endDataEntry}"/>
				#{'  '}
				<a4j:commandButton value="#{messages['button.back2analysis']}" action="#{transactionProcess.dataEntryBackToAnalysis}"/>
				#{'  '}
				<a4j:commandButton value="#{messages['button.l8r']}" action="home">
					<s:conversationPropagation type="end"/>
				</a4j:commandButton>
			</div>
		</h:form>
		
		
		<ui:remove>
		<rich:modalPanel id="msgPanel" width="300">
			<f:facet name="header">
				<h:outputText value="Error"/>
			</f:facet>
			<rich:messages showDetail="true"/>
			<br />
			<br />
			<a4j:commandButton value="Aceptar" onclick="#{rich:component('msgPanel')}.hide()"/>
		</rich:modalPanel>
		</ui:remove>
		
		<ui:include src="toolbox/mutateRRR.xhtml"/>
		<ui:include src="toolbox/split.xhtml"/>
		<ui:include src="toolbox/merge.xhtml"/>
		<ui:include src="toolbox/editData.xhtml"/>
		<ui:include src="toolbox/undo.xhtml" />
	</ui:define>
	
</ui:composition>
